import {
  LaptopOutlined,
  NotificationOutlined,
  UserOutlined,
  PoweroffOutlined
} from "@ant-design/icons";
import { Breadcrumb, Layout, Menu, theme,Button, message, Popconfirm  } from "antd";
import React, { useContext } from "react";
import { Outlet, Link ,useNavigate} from "react-router-dom";
import "./index.scss";
import mycontext from "../utils/myContext";
import { useEffect } from "react";
const { Header, Content, Sider } = Layout;
const List = [
  {
    title: "首页",
    path: "SystemHome",
  },
  {
    title: "权限",
    path: "MemberManage",
  },
  {
    title: "财务",
    path: "Comprehensive",
  },
  {
    title: "运营",
    path: "Label",
  },
  {
    title: "订单",
    path: "orderList",
  },
  {
    title: "促销",
    path: "deductionManagement",
  },
  {
    title: "商品",
    path: "productList",
  },
  {
    title: "用户",
    path: "userList",
  },
];

const App = () => {
const navigator=useNavigate();
  const store = useContext(mycontext);
  const homeList = store.menuList;
  useEffect(()=>{
    console.log(JSON.parse(sessionStorage.getItem("userInfo"))[0].user_img);
  },[])
  const items1 = List.map((item) => {
    // console.log(item);
    return {
      key: item.title,
      label: <Link to={item.path}>{item.title}</Link>,
    };
  });
  const items2 = homeList.map((item) => {
    // console.log(item);
    return {
      key: item.title,
      label: item.title,
      children: item.children.map((item1) => {
        return {
          key: item1.title,
          label: <Link to={item1.path}>{item1.title}</Link>,
        };
      }),
    };
  });
  const confirm = (e) => {
    console.log(e);
    navigator("/login");
    message.success('退出成功');
  };
  const cancel = (e) => {
    console.log(e);
  };
  const clickMenu = (event) => {
    // console.log(event.key);
    // console.log(store.menuList[0].title);
    store.setMenuList(event.key);
  };
  const {
    token: { colorBgContainer },
  } = theme.useToken();
  return (
    <Layout>
      <Header className="header">
        <div className="logo">Saas</div>
        <Menu
          className="mainMenu"
          theme="dark"
          mode="horizontal"
          onClick={clickMenu}
          items={items1}
        />
        <div className="userIn">
            <img  src={'http://127.0.0.1:8888'+JSON.parse(sessionStorage.getItem("userInfo"))[0].user_img} alt="" />
            <p>{JSON.parse(sessionStorage.getItem("userInfo"))[0].user_name}</p>
            <Popconfirm
              title="是否退出"
              onConfirm={confirm}
              onCancel={cancel}
              okText="确定退出"
              cancelText="取消"
            >
                        <PoweroffOutlined />
            </Popconfirm>
        </div>
      </Header>
      <Layout>
        <Sider
          width={200}
          style={{
            background: colorBgContainer,
          }}
        >
          <Menu
            mode="inline"
            defaultSelectedKeys={["1"]}
            style={{
              height: "100%",
              borderRight: 0,
            }}
            items={items2}
          />
        </Sider>
        <Layout>
          <Content
            style={{
              padding: 10,
              margin: 0,
              minHeight: 280,
              background: colorBgContainer,
            }}
          >
            <Outlet />
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
};
export default App;
